<template>
    <view :class="[jClass, 'j-alert', 'j-alert-'+type, {'j-alert-with-icon':showIcon}, {'j-alert-with-desc':desc}]"
        v-if="!closed">
        <view v-if="showIcon" class="j-alert-icon">
            <j-icon type="prompt" v-if="type === 'info'" :size="desc?24:16"></j-icon>
            <j-icon type="success" v-if="type === 'success'" :size="desc?24:16"></j-icon>
            <j-icon type="warning" v-if="type === 'warning'" :size="desc?24:16"></j-icon>
            <j-icon type="delete" v-if="type === 'error'" :size="desc?24:16"></j-icon>
        </view>
        <slot></slot>
        <view class="j-alert-desc">
            <slot name="desc"></slot>
        </view>
        <view class="j-alert-close" v-if="closable" @tap="handleTap">
            <j-icon type="close"></j-icon>
        </view>
    </view>
</template>

<script>
    import jIcon from '../j-icon/j-icon.vue'
    export default {
        name: 'Alert',
        props: {
            type: {
                type: String,
                value: 'info'
            },
            closable: {
                type: Boolean,
                value: false
            },
            showIcon: {
                type: Boolean,
                default: false
            },
            desc: {
                type: Boolean,
                default: false
            },
            jClass: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                closed: false
            };
        },
        components: { jIcon },
        methods: {
            handleTap() {
                this.closed = !this.closed;
                this.$emit('close');
            },
        }
    }
</script>

<style lang="scss">
    .j-alert {
        position: relative;
        margin: 10px;
        padding: 8px 48px 8px 16px;
        font-size: 14px;
        border-radius: 2px;
        color: #fff;
        background: #f7f7f7;
        color: #495060
    }

    .j-alert.j-alert-with-icon {
        padding: 8px 48px 8px 38px
    }

    .j-alert-info {
        color: #fff;
        background: #2db7f5
    }

    .j-alert-success {
        color: #fff;
        background: #19be6b
    }

    .j-alert-warning {
        color: #fff;
        background: #f90
    }

    .j-alert-error {
        color: #fff;
        background: #ed3f14
    }

    .j-alert-icon {
        position: absolute;
        top: 9px;
        left: 16px;
        font-size: 14px
    }

    .j-alert-desc {
        font-size: 12px
    }

    .j-alert-with-desc {
        padding: 16px;
        position: relative
    }

    .j-alert-with-desc.j-alert-with-icon {
        padding: 16px 16px 16px 69px
    }

    .j-alert-with-desc .j-alert-icon {
        top: 50%;
        left: 24px;
        margin-top: -21px;
        font-size: 28px
    }

    .j-alert-close {
        font-size: 12px;
        position: absolute;
        right: 16px;
        top: 8px;
        overflow: hidden;
        cursor: pointer
    }
</style>
